<template>
    <view>
        <z-paging
            ref="paging"
            v-model="dataList"
            :refresher-out-rate="0.8"
            auto-scroll-to-top-when-reload
            safe-area-inset-bottom
            bg-color="#fff"
            @query="queryList"
            :auto-clean-list-when-reload="false"
            :auto-scroll-to-top-when-reload="false"
            empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
            empty-view-text="暂无内容"
            :refresher-status.sync="refresherStatus"
        >
            <view class="top flex_wrap row_middle row_between">
                <view class="flex_wrap row_middle pepole">
                    <view class="flex_wrap flex_column left">
                        <view
                            ><u--text
                                text="总领取数量"
                                color="#FFF"
                                size="24rpx"
                        /></view>
                        <view
                            ><u--text
                                :text="total"
                                color="#FFF"
                                size="64rpx"
                                bold
                        /></view>
                    </view>
                </view>
            </view>
            <view class="scrollViews">
                <view class="search">
                    <u-search
                        placeholder="请输入关键字"
                        v-model="keyword"
                        bgColor="#E1E1E1"
                        color="#333"
                        placeholderColor="#999999"
                        clearabled
                        height="64rpx"
                        @custom="keywordSearch"
                        :actionStyle="actionStyle"
                    />
                </view>

                <view>
                    <!-- <u-text
                        text="全部人数"
                        size="32rpx"
                        color="rgba(51, 51, 51, 1)"
                        bold
                        prefixIcon="pages_shop/static/img/order/all.png"
                        iconStyle="width:36rpx;height:36rpx"
                        @click="openEditModal(item)"
                        margin="26rpx"
                    /> -->
                    <view
                        class="item flex_wrap flex_column"
                        v-for="(item, index) in dataList"
                        :key="index"
                        :style="{
                            background:
                                item.status == 9
                                    ? 'linear-gradient(270deg, rgba(239,251,247,0)  0%, #EAFFF8 100%);'
                                    : 'linear-gradient(270deg, rgba(239,251,247,0) 0%, #FFF2E5 100%);',
                        }"
                    >
                        <view>
                            <view class="topMessage flex_wrap row_between">
                                <view class="flex_wrap row_middle">
                                    <u-image
                                        :src="
                                            item.status == 9
                                                ? require('../../static/img/order/greenpeo.png')
                                                : require('../../static/img/order/orpeo.png')
                                        "
                                        width="100rpx"
                                        height="100rpx"
                                    />
                                    <view class="flex_wrap flex_column">
                                        <view style="margin-left: 20rpx">
                                            <u-text
                                                :text="item.name"
                                                color="#333"
                                                bold
                                                size="40rpx"
                                            />
                                            <u-gap height="10rpx" />
                                            <view
                                                style="
                                                    display: inline-block;
                                                    max-width: 240rpx;
                                                "
                                            >
                                                {{ item.mobile }}
                                            </view>
                                        </view>
                                    </view>
                                </view>
                                <view
                                    style="margin-top: 20rpx; text-align: right"
                                >
                                    <view
                                        class="statusBg"
                                        :style="{
                                            backgroundImage:
                                                item.status == 9
                                                    ? `url(${require('../../static/img/order/green.png')})`
                                                    : `url(${require('../../static/img/order/orgeng.png')})`,
                                        }"
                                        >{{ statusMap[item.status] }}</view
                                    >
                                    <u-text
                                        :text="`${item.receiveCount} 份`"
                                        size="26rpx"
                                        color="#333"
                                        align="right"
                                        lineHeight="90rpx"
                                    />
                                </view>
                            </view>
                            <view class="bottomMessage flex_wrap row_between">
                                <view class="timeBox"
                                    ><u-text
                                        :text="`领取时间: ${item.createTime}`"
                                        size="26rpx"
                                        color="#333"
                                        mode="phone"
                                /></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </z-paging>
    </view>
</template>

<script>
import { getOrderReceiveList, countReceive } from "@/api/orderSalesman.js";
export default {
    data() {
        return {
            salesmanId: "",
            orderNum: "",
            total: 0,
            keyword: "",
            dataList: [],
            statusMap: {
                1: "待使用",
                2: "未回寄",
                3: "待收货",
                4: "待发货",
                5: "等待检测",
                9: "已完成",
            },
        };
    },
    onLoad(options) {
        this.salesmanId =
            options.salesmanId || this.$store.getters?.userInfo.id;
        this.orderNum = options.orderNum;
        wx.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#4992FA",
            animation: {
                duration: 500,
            },
        });
        countReceive(this.orderNum).then((res) => {
            console.log("res :>> ", res);
            this.total = res?.data ?? 0;
        });
    },
    methods: {
        async queryList(pageNo, pageSize) {
            const params = {
                orderNum: this.orderNum,
                salesmanId: this.salesmanId,
                pageNum: pageNo,
                pageSize: pageSize,
            };
            if (this.keyword) params.query = this.keyword;
            const result = await getOrderReceiveList(params);
            this.$refs.paging.complete(result.data.rows);
        },
        keywordSearch() {
            this.$refs.paging.reload();
        },
    },
};
</script>
<style>
page {
    background-color: #fff !important;
}
</style>

<style lang="scss" scoped>
.signList {
    ::v-deep.u-line {
        height: auto !important;
    }

    position: relative;
}

.pepole {
    padding-left: 100rpx;
    padding-bottom: 100rpx;
}

.top {
    width: 100%;
    height: 327rpx;
    width: 100%;
    background-size: cover;
    background-position-y: bottom;
    background-image: url("https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/09/20/a85f3a5aad4944ac8ba3d4db1b1ec69d.png");
}

.search {
    padding: 30rpx 20rpx 30rpx 20rpx;
    background-color: #fff;
}

.scrollViews {
    width: 100%;
    padding: 30upx 28upx 0 28upx;
    box-sizing: border-box;
    border-radius: 60rpx 60rpx 0rpx 0rpx;
    background-color: #fff;
    margin-top: -110rpx;

    .item {
        width: 100%;
        height: auto;
        box-shadow: 0 0 12upx 2upx rgba(0, 0, 0, 0.08);
        margin-bottom: 20upx;

        .topMessage {
            padding: 20upx;
            // border-bottom: 1px solid #dddadf;
            text-align: center;
        }

        .statusBg {
            width: 121rpx;
            height: 40rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #ffffff;
            line-height: 40rpx;
            text-align: center;
            background-size: cover;
        }

        .bottomMessage {
            padding: 20upx;
            box-sizing: border-box;
            background-color: rgba(245, 246, 250, 0.6);
        }

        .timeBox {
            margin-left: 100rpx;
        }
    }
}

/* 其他顾问 */
.else_enterprise {
    // padding: 20rpx 20rpx;

    margin-top: 12rpx;
    padding: 32rpx;
    background: linear-gradient(
        135deg,
        #deebf9 0%,
        rgba(255, 255, 255, 0) 100%
    );

    .list1,
    .list2 {
        width: 134rpx;
        height: 48rpx;
        color: #fff;
        text-align: center;
        line-height: 48rpx;
        background: linear-gradient(90deg, #74adff 0%, #4992fa 100%);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        font-size: 28rpx;
        margin-right: 20rpx;
    }

    .list2 {
        background: linear-gradient(90deg, #58eaf7 0%, #48c4cf 100%);
    }
}

.el_adviser_info_info {
    display: flex;
    align-items: center;
}

.el_adviser_info_img {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    margin: 0 20rpx;
}

button::after {
    border: none;
    border-radius: 0;
}

.adviser_info,
.adviser_else {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    color: #333;
    justify-content: space-between;
}

.adviser_info_img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-right: 16rpx;
}
</style>
